// 变量
$bgc-color: #058;
$border-color: 1px solid $bgc-color;
body{
  background: $bgc-color;
}
div{
  border: $border-color;
}


// 调用父选择器
a{
  background-color: $bgc-color;
  & &-text{
    color: $bgc-color
  }
}


//  属性的嵌套
div{
  font: {
    family: 'Courier New', Courier, monospace;
    size: 14px;
    style: inherit,
  }
}
div{
  border: 1px solid $bgc-color{
    right: $bgc-color;
    left: $bgc-color
  };
}

// mixin
@mixin alert{
  background-color: $bgc-color;
  border: $border-color;
  a {
    background-color: $bgc-color;
  }
}

div{
  @include alert()
}

@mixin alerts($text-color, $back-color){
  // 参数命名$开头
  background: $back-color;
  color: $text-color;
}

div{
  @include alerts(red, pink)
}